<template>
  <el-card class="box-card">
    <div class="text item">
      <h2>图像搜索</h2>
    </div>

    <el-form ref="searchForm" inline>
      <!-- 名字 -->
      <el-form-item label="名字">
        <el-input v-model="searchCriteria.name" placeholder="输入名字" />
      </el-form-item>

      <!-- 日期 -->
      <el-form-item label="日期">
        <el-date-picker
          v-model="searchCriteria.date"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
        />
      </el-form-item>

      <!-- 类型 -->
      <el-form-item label="类型">
        <el-select v-model="searchCriteria.type" placeholder="选择类型">
          <el-option label="普通图像" value="normal" />
          <el-option label="预测结果图片" value="prediction" />
        </el-select>
      </el-form-item>

      <!-- 搜索按钮 -->
      <el-form-item>
        <el-button type="primary" @click="searchImages">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 图像列表 -->
    <div class="image-list">
      <div v-for="image in imageList" :key="image.id" class="image-item">
        <img :src="image.url" alt="image.name">
        <div class="image-info">
          <h3>{{ image.name }}</h3>
          <p>{{ image.date }}</p>
          <p>{{ image.type === 'normal' ? '普通图像' : '预测结果图片' }}</p>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      searchCriteria: {
        name: '',
        date: '',
        type: ''
      },
      imageList: [] // 搜索结果
    }
  },
  methods: {
    searchImages() {
      console.log('搜索图像', this.searchCriteria)
      // 实现搜索逻辑
      // 示例搜索结果
      this.imageList = [
        { id: 1, name: '图像1', date: '2023-01-01', type: 'normal', url: 'image-url-1.jpg' }
        // 更多图像...
      ]
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: 20px;
}
.text.item {
  text-align: center;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
}
.image-item {
  margin: 10px;
  text-align: center;
}
.image-item img {
  max-width: 100px;
  height: auto;
}
.image-info {
  margin-top: 10px;
}
</style>
